<template>
  <view class="registration-container">
    <view class="avatar-container">
      <img :src="avatar || defaultAvatar" class="avatar" alt="Avatar" @click="chooseAvatar">
    </view>
    <input v-model="username" type="text" placeholder="用户名" class="input-field">
    <input v-model="password" type="password" placeholder="密码" class="input-field">
    <input v-model="phone" type="text" placeholder="手机号" class="input-field">
    <input v-model="email" type="email" placeholder="邮箱" class="input-field">
    <button @click="register" class="register-button">注册</button>
    <p class="login-link">已有账号？<a @click="goToLogin">点击登录</a></p>
	<view class="xieyi text-center">
	  <text class="text-grey1">注册即代表同意</text>
	  <text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
	  <text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
	</view>
  </view>
  
</template>

<script>
export default {
  data() {
    return {
      defaultAvatar: "/static/images/add_user.png", // 默认头像路径
      avatar: "", // 初始化头像为空字符串
      username: "",
      password: "",
      phone: "",
      email: "",
    };
  },
  methods: {
	  
    chooseAvatar() {
      wx.chooseImage({
        count: 1, // 最多可以选择的图片张数
        sizeType: ['compressed'], // 选择图片的压缩级别
        sourceType: ['album'], // 选择图片的来源，相册
        success: (res) => {
          const tempFilePaths = res.tempFilePaths; // 选择的图片临时文件路径
          this.avatar = tempFilePaths[0]; // 更新 avatar 属性为选择的头像文件路径
        },
        fail: (err) => {
          console.log(err);
        }
      });
    },
    register() {
      const registrationData = {
        avatar: this.avatar || this.defaultAvatar,
        username: this.username,
        password: this.password,
        phone: this.phone,
        email: this.email,
      };
      console.log(registrationData);

      // 继续注册逻辑或进行 API 调用
    },
    goToLogin() {
      wx.navigateTo({
        url: '/pages/user/login'
      });
    },
  },
};
</script>

<style scoped>
.registration-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}

.avatar-container {
  position: relative;
  margin-bottom: 20px;
}

.avatar {
  width: 100px;
  height: 100px;
/*  border-radius: 50%; */
}


.input-field {
  width: 300px;
  height: 30px;
  margin-bottom: 20px;
  padding: 5px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.register-button {
  width: 120px;
  height: 40px;
  background-color: #007bff;
  color: #fff;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.login-link {
  margin-top: 20px;
  font-size: 14px;
}

.login-link a {
  color: #007bff;
  cursor: pointer;
}
</style>
